  <template>
  	<!-- 
	swiper中的transfrom会使fixed失效,此时用height="100%"固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
  	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
  	<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" height="100%" top="80" :down="downOption"
  		@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
  		<!--  -->
  		<view class="vip-label">
  			<text :class="{'active': labelIndex==index}" v-for="(item,index) in tabs[i].labels" :key="index"
  				@click="labelClick(index)">{{ item.title }}</text>
  		</view>
  		<!-- 数据列表 -->
  		<view class="member-card" v-for="(item,index) in dataList" :key="index">
  			<view class="member-card__item">
  				<view class="member-card__head" :style="{background: item.background}">
  					<view class="name">{{ item.name }}</view>
  					<view class="nums">{{ item.card_value }}</view>
  					<image class="icon" src="../../../static/icons/icon_vipcard-backdrop.png" mode="aspectFit">
  					</image>
  				</view>
  				<view class="member-card__body">
  					<view class="title">{{ item.name }}</view>
  					<view class="info">{{ item.info }}</view>
  					<view class="price">{{ item.salesprice }}</view>
  				</view>
  				<u-button type="default" size="mini" shape="circle"
  					:custom-style="{width:'140rpx',marginLeft:'24rpx',color:'#6D4BBE'}"
  					@click="buy(item)">立即购买</u-button>
  			</view>
  			<text class="member-card__notes" v-if="item.notes">{{ item.notes }}</text>
  		</view>
  		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
  	</mescroll-uni>
  </template>

  <script>
  	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
  	export default {
  		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
  		data() {
  			return {
  				show: false,
  				list: [{
  						value: '1',
  						label: '微信'
  					},
  					{
  						value: '2',
  						label: '余额'
  					},
  					{
  						value: '3',
  						label: '平台币'
  					}
  				],
  				payObj: {},
  				downOption: {
  					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
  				},
  				upOption: {
  					auto: false, // 不自动加载
  					// page: {
  					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
  					// 	size: 10 // 每页数据的数量
  					// },
  					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
  					empty: {
  						icon: '../../../../static/images/icon_empty-class.png',
  						tip: '暂无课程安排哦'
  					}
  				},
  				// labelList: [
  				// 	{ title: '精品课程' },
  				// 	{ title: '特色小班' },
  				// ],
  				labelIndex: 0,
  				dataList: [], //列表数据
  				selectData: {},
  			}
  		},
  		props: {
  			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
  			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
  				type: Number,
  				default () {
  					return 0
  				}
  			},
  			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
  				type: Array,
  				default () {
  					return []
  				}
  			}
  		},
  		methods: {
  			/*下拉刷新的回调 */
  			downCallback() {
  				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
  				// loadSwiper();
  				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
  				this.mescroll.resetUpScroll()
  			},
  			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  			upCallback(page) {
  				var that = this;
  				let shop = this.$core.getCurrentShop();
  				var shop_id = shop.id;

  				var type_id = this.tabs[this.i].id;
  				let postData = {
  					page: page.num, // 页码, 默认从1开始
  					pagesize: page.size, // 每页数据条数
  					shop_id: shop_id,
  					course_category_id: type_id,
  				};
  				//联网加载数据
  				that.$core.get({
  					url: 'fitness.vip/vip_list',
  					data: postData,
  					success: (ret) => {
  						if (page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
  						that.dataList = that.dataList.concat(ret.data.data); //追加新数据
  						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
  						that.mescroll.endSuccess(ret.data.data.length);
  					}
  				});

  				// this.$u.post('api/manage/course_list', postData).then(res => {
  				// 	console.log('course_list:',res)
  				// 	//设置列表数据
  				// 	if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
  				// 	this.dataList=this.dataList.concat(res.data.data); //追加新数据
  				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
  				// 	this.mescroll.endSuccess(res.data.data.length);
  				// }).catch(err => {
  				// 	//联网失败, 结束加载
  				// 	this.mescroll.endErr();
  				// })
  			},
  			labelClick(index) {
  				this.labelIndex = index
  				this.mescroll.resetUpScroll()
  			},
  			confirm(e) {
  				let that = this
  				if (e[0].value == 1) {
  					that.$core.post({
  						url: 'fitness.vip/create_order',
  						data: {
  							vip_id: that.selectData.id
  						},
  						success: (ret) => {
  							that.$core.post({
  								url: 'fitness.pay/pay',
  								data: {
  									type: 'vip',
  									pay_type: 1,
  									order_id: ret.data.id,
  									platform: 'wxmini'
  								},
  								success: (ret) => {
  									let wxconfig = ret.data;
  									uni.requestPayment({
  										provider: 'wxpay',
  										timeStamp: wxconfig.timeStamp,
  										nonceStr: wxconfig.nonceStr,
  										package: wxconfig.package,
  										signType: wxconfig.signType,
  										paySign: wxconfig.paySign,
  										success: function(res) {
  											uni.showToast({
  												title: '购买成功',
  												icon: 'none',
  												success() {
  													uni.navigateBack({
  														delta: 1
  													})
  												}
  											})
  										},
  										fail: function(err) {
  											uni.showToast({
  												title: '支付失败',
  												icon: 'none'
  											})
  											console.log(err);
  										}
  									});
  								}
  							});
  						}
  					});
  				}
  				if (e[0].value == 2) {
  					if (that.payObj.userMoney.money < this.selectData.salesprice) {
  						uni.showToast({
  							title: '当前余额不足',
  							icon: 'none'
  						})
  						return
  					}
  					that.$core.post({
  						url: '/fitness.vip/create_order',
  						data: {
  							vip_id: that.selectData.id
  						},
  						success: (ret) => {
  							that.$core.post({
  								url: '/fitness.user/shop_money_pay',
  								data: {
  									type: e[0].value,
  									order_id: ret.data.id,
									shop_id: ret.data.shop_id,
									order_no: ret.data.order_no,
  								},
  								success: (ret) => {
  									uni.showToast({
  										title: '支付成功',
  										icon: 'none'
  									})
  									that.show = false
  								}
  							});
  						}
  					});
  				}
  				if (e[0].value == 3) {
  					if (that.payObj.shopMoney.money < this.selectData.salesprice) {
  						uni.showToast({
  							title: '当前平台币不足',
  							icon: 'none'
  						})
  						return
  					}
  					that.$core.post({
  						url: '/fitness.vip/create_order',
  						data: {
  							vip_id: that.selectData.id
  						},
  						success: (ret) => {
  							that.$core.post({
  								url: '/fitness.user/shop_money_pay',
  								data: {
  									type: e[0].value,
  									order_id: ret.data.id,
  									shop_id: ret.data.shop_id,
  									order_no: ret.data.order_no,
  								},
  								success: (ret) => {
  									uni.showToast({
  										title: '支付成功',
  										icon: 'none'
  									})
  									that.show = false
  								}
  							});
  						}
  					});
  				}

  			},
  			buy(item) {
  				console.log(item)
  				var that = this;
  				that.selectData = item
  				that.$core.post({
  					url: '/fitness.user/get_user_shop_money',
  					data: {
  						shop_id: item.shop_id
  					},
  					success: (ret) => {
  						if (ret.code == 1) {
  							that.payObj = ret.data
  							that.show = true
  						}
  					}
  				})
  			}
  		}
  	}
  </script>

  <style lang="scss" scoped>
  	.content {
  		height: 400rpx;
  		width: 90%;
  		margin: 0 auto;

  		>view {
  			margin-top: 20rpx;
  		}
  	}

  	.vip-label {
  		display: flex;
  		flex-wrap: wrap;
  		padding: 40rpx 45rpx 0;

  		text {
  			display: block;
  			margin-right: 45rpx;
  			margin-bottom: 24rpx;
  			padding: 0 20rpx;
  			width: calc((100% - 90rpx)/3);
  			background: #fff;
  			text-align: center;
  			line-height: 60rpx;
  			font-size: 26rpx;
  			font-weight: 400;
  			color: #333333;
  			border-radius: 99px;

  			&:nth-of-type(3n) {
  				margin-right: 0;
  			}

  			&.active {
  				background: #6D4BBE;
  				color: #fff;
  			}
  		}

  	}

  	.member-card {
  		position: relative;
  		margin: 24rpx;
  		background: #FFFFFF;
  		border-radius: 24rpx;
  		overflow: hidden;

  		&__item {
  			padding: 32rpx;
  			display: flex;
  			align-items: center;
  		}

  		&__notes {
  			display: block;
  			border-top: 1rpx #F0F0F0 solid;
  			padding: 24rpx 32rpx;
  			line-height: 36rpx;
  			font-size: 22rpx;
  			color: #666666;
  		}

  		&__head {
  			position: relative;
  			width: 205rpx;
  			height: 132rpx;
  			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
  			border-radius: 12rpx;

  			.name {
  				position: absolute;
  				top: 18rpx;
  				left: 14rpx;
  				right: 14rpx;
  				line-height: 38rpx;
  				font-size: 26rpx;
  				font-weight: 500;
  				color: #FFFFFF;
  			}

  			.nums {
  				position: absolute;
  				bottom: 18rpx;
  				left: 14rpx;
  				right: 14rpx;
  				line-height: 25rpx;
  				font-size: 18rpx;
  				color: #FFFFFF;
  			}

  			.icon {
  				position: absolute;
  				bottom: 0;
  				right: 0;
  				display: block;
  				width: 106rpx;
  				height: 101rpx;
  			}
  		}

  		&__body {
  			flex: 1;
  			align-self: stretch;
  			display: flex;
  			flex-direction: column;
  			padding: 0 22rpx;
  			line-height: 34rpx;
  			font-size: 24rpx;
  			color: #666666;
  			overflow: hidden;

  			.title {
  				line-height: 45rpx;
  				font-size: 32rpx;
  				font-weight: 500;
  				color: #333333;
  			}

  			.info {
  				flex: 1;
  				overflow: hidden;
  			}

  			.price {
  				margin-top: 5rpx;
  				line-height: 30rpx;
  				font-size: 36rpx;
  				font-weight: 600;
  				color: #EE0000;

  				&::before {
  					content: "¥";
  					padding-right: 5rpx;
  					font-size: 20rpx;
  				}
  			}
  		}
  	}
  </style>